import React from 'react'
import { Button, Card, Col, Divider, Icon, Row, Tag } from 'antd'
import approve_icon from '../../../images/approve.png'
import refuse_icon from '../../../images/refuse.png'

const ApplicationsBox = ({serialsApplicationsPageable, currentTab, handApplication}) => {
  return <div>
    {
      serialsApplicationsPageable.content.map((application, index) => {
        return <Row type='flex' justify='center' key={index}>
          <Col span={20} className='margin-b-2 application-card'>
            <Card
              key={index}
              title={<span>
                <Tag>{application.type === 'serial' ? '系列' : '视频'}</Tag>
                {application.title}</span>}
              extra={<div>
                <span><Icon type='solution' /> <b>{application.applicant}</b></span><br />
                <span><Icon type='clock-circle' /> {application.createTime}</span>
              </div>}
            >
              <div style={{minHeight: '100'}}>
                {application.reason}
              </div>
              <Row type='flex' justify='end'>
                {
                  currentTab === 'applying'
                    ? <div>
                      <Button
                        onClick={() => handApplication(application.id, 'refuse')}>拒绝</Button>
                      <Divider type='vertical' />
                      <Button type='primary'
                        onClick={() => handApplication(application.id, 'approve')}>同意</Button>
                    </div>
                    : <div style={{width: 80, overflow: 'hidden'}}>
                      {application.status === '已同意'
                        ? <img src={approve_icon} className='application-status-approve-icon' />
                        : <img src={refuse_icon} className='application-status-refuse-icon' />
                      }
                    </div>
                }
              </Row>
            </Card>
          </Col>
        </Row>
      })
    }

  </div>
}
export default ApplicationsBox
